<template>
  <div style="width:100%">
    <div>
      <div
        v-if="imageSrc"
        class="ejSbaT"
        :style="{backgroundImage:'url('+imageSrc+')'}"
        @click="preview"
      >
        <div class="remove" @click="removeImg" v-if="!readonly&&!disabled">
          <i class="el-icon-remove"></i>
        </div>
      </div>
      <el-popover
        v-show="!imageSrc&&!readonly&&!disabled"
        placement="bottom-start"
        width="480"
        trigger="click"
        popper-class="pop_rename"
        :popper-append-to-body="false"
        ref="signature"
      >
        <div class="box" slot="reference">
          <div class="addSignature" style="width:100%">
            <i class="el-icon-edit"></i>
            添加签名
          </div>
        </div>
        <div>
          <div class="Gray">请在下方空白区域横向书写签名</div>
          <sign-canvas class="sign-canvas" ref="SignCanvas" :options="options" v-model="imageSrc"/>
          <hr />
          <el-row :gutter="20">
            <el-col :span="6" :offset="18">
              <el-button type="text" @click="canvasClear()">清除</el-button>
              <el-button type="primary" @click="saveAsImg()">确认</el-button>
            </el-col>
          </el-row>
        </div>
      </el-popover>
      <div class="box" v-if="!imageSrc&&(readonly||disabled)">
        <div class="addSignature" style="width:100%">
          <i class="el-icon-edit"></i>
          添加签名
        </div>
      </div>
    </div>
    <el-dialog
      title="signature.png"
      :visible.sync="dialogPreview"
      append-to-body
      :fullscreen="true"
      :modal="true"
    >
      <div class="dragAbleContainer fileViewer imageViewer">
        <img :src="imageSrc" />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogPreview = false">关闭</el-button>
        <el-button type="primary" @click="downloadSignImg()">下载</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import SignCanvas from './component/signCanvas'
import _ from 'lodash'
export default {
  components:{SignCanvas},
  name: "pm-sign",
  props: {
    value:{
      type: String | Number | Object | Array,
    },
    mode: { // 编辑态: edit, 查看态:view , 用于在子表格内切换状态
      default: 'edit'
    },
    entityModel:{ // 如果组件绑定了一个实体, 则该属性会传入实体的数据
      default:()=>{}
    }, 
    readonly: {
      default:false
    },
    disabled: {
      default:false
    },
    settings: {
    type: Object,
    default: () => {},
    },
    icon:'',
    viewId: {},
    viewCode: {
      default: "view",
    },
  },
  data() {
    return {
      imageSrc: "", //生成图片
      dialogPreview: false,
      options:{
        bgColor: '#fff',
        writeColor: '#000',
        isSign: true,
        writeWidth: 5,
        isFullScreen: false,
        canvasWidth: 480, //canvas宽高 [Number] 可选
        canvasHeight: 200, //高度  [Number] 可选
      }
    };
  },
  mounted() {
    this.imageSrc = _.cloneDeep(this.value);
  },
  methods: {
    preview() {
      this.$refs.signature.doClose()
      this.dialogPreview = true;
    },
    removeImg() {
      this.imageSrc = "";
      this.canvasClear()
      this.$emit("input", "");
    },
    canvasClear() {
      this.$refs.SignCanvas.canvasClear();
    },
    saveAsImg() {
      this.$refs.signature.doClose()
      const img =this.$refs.SignCanvas.saveAsImg();
      this.imageSrc = img;
      this.$emit("input", img);
    },
    downloadSignImg() {
      //下载图片地址和图片名
      var image = new Image();
      // 解决跨域 Canvas 污染问题
      image.setAttribute("crossOrigin", "anonymous");
      image.onload = function() {
        var canvas = document.createElement("canvas");
        canvas.width = image.width;
        canvas.height = image.height;
        var context = canvas.getContext("2d");
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
        var a = document.createElement("a"); // 生成一个a元素
        var event = new MouseEvent("click"); // 创建一个单击事件
        a.download = name || "photo"; // 设置图片名称
        a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
      };
      image.src = this.imageSrc;
    }
  }
};
</script>
<style lang="scss" scoped>
.box {
  -webkit-appearance: none;
  background: #f7f7f7;
  border: 1px solid #f7f7f7;
  border-radius: 4px;
  box-sizing: border-box;
  font-size: 13px;
  height: 36px;
  outline: none;
  padding: 0 12px;
  width: 100%;
  cursor: pointer;
}
.addSignature {
  color: rgb(117, 117, 117);
  line-height: 36px;
}
.app-sign-canvas {
  width: 100%;
  height: 300px;
}
.Gray {
  font-size: 15px;
  color: #333;
}
.ejSbaT {
  position: relative;
  height: 130px;
  background-color: rgb(255, 255, 255);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center center;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 4px, rgba(0, 0, 0, 0.12) 0px 0px 2px;
  border-radius: 4px;
}
.ejSbaT .remove {
  position: absolute;
  right: -8px;
  top: -8px;
  visibility: hidden;
}
.ejSbaT:hover {
  .remove {
    visibility: visible;
  }
}
.dragAbleContainer {
  align-items: center;
  display: flex;
  justify-content: center;
}
.previewContainer .imageViewer {
  overflow: visible;
}
.previewContainer .fileViewer {
  border: none;
  height: 100%;
  position: absolute;
  width: 100%;
}
</style>
<style>
.pop_rename {
  padding: 0 !important;
}
</style>